<template>
	<view class="fui-wrap">
		<view class="pannel">
			<fui-section title="车辆信息" isLine size="32"></fui-section>
			<view class="message" v-if="cars">
				<view class="item">
					<fui-text text="车牌号：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
					<platetype :plate_number="plate_number" :plate_type="cars.plate_type || ''"></platetype>
				</view>
				<view class="item">
					<fui-text text="车型：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
					<fui-text :text="cars.car_models || '无记录'" :color="cars.car_models?'#000':'#c2c2c2'" :size="28" block></fui-text>
				</view>
				<view class="item">
					<fui-text text="车主：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
					<fui-text :text="cars.car_owners || '无记录'" :color="cars.car_owners?'#000':'#c2c2c2'" :size="28" block></fui-text>
				</view>
				<view class="item">
					<fui-text text="停车状态：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
					<fui-tag text="场内" type="success" v-if="records.length>0 && (records[0].status===0 || records[0].status===1 || records[0].status===6)" :padding="['8rpx','16rpx']"></fui-tag>
					<fui-tag text="场外" background="gray" color="#fff" v-else :padding="['8rpx','16rpx']"></fui-tag>
				</view>
			</view>
		</view>
		<view class="pannel">
			<fui-section title="录入信息" isLine size="32"></fui-section>
			<view class="message">
				<block v-if="cars.rules">
					<view class="item">
						<fui-text text="录入时间：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-text :text="cars.createtime" color="#000" :size="28" block></fui-text>
					</view>
					<view class="item">
						<fui-text :text="cars.rules_type_txt+'：'" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-text :text="cars.rules.title" color="#000" :size="28" block></fui-text>
					</view>
					<view class="item">
						<fui-text text="有效期：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-text :text="validityPeriod(cars.starttime,cars.endtime)" color="#000" :size="28" block></fui-text>
					</view>
					<view class="item" v-if="cars.rules_type=='stored'">
						<fui-text text="余额：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-text :text="'￥'+cars.balance" color="#000" :size="28" block></fui-text>
					</view>
					<block v-if="cars.remark_line">
					<view class="item" v-for="(value,index) in cars.remark_line" :key="index" style="height: auto;align-items: flex-start;">
						<fui-text :text="index+'：'" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-text v-if="value.indexOf('http')==-1" :text="value" color="#000" :size="28" block></fui-text>
						<image v-if="value.indexOf('http')!=-1" :src="value" mode="widthFix" style="width: 300rpx;"></image>
					</view>
					</block>
					<view class="item" v-if="cars.remark" style="height: auto;align-items: flex-start;">
						<fui-text text="备注：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-text :text="cars.remark" color="#000" :size="28" block style="width: 500rpx;"></fui-text>
					</view>
					<view class="item">
						<fui-text text="状态：" color="#000" :size="28" block align="right" style="width: 160rpx;padding-right: 20rpx;"></fui-text>
						<fui-tag text="正常" type="success" v-if="cars.status=='normal'" :padding="['8rpx','16rpx']"></fui-tag>
						<fui-tag text="隐藏" type="danger" v-if="cars.status=='hidden'" :padding="['8rpx','16rpx']"></fui-tag>
					</view>
				</block>
				<fui-text v-else text="无记录" color="#c2c2c2" :size="28" block></fui-text>
			</view>
		</view>
		<view class="pannel">
			<fui-section title="停车记录" isLine size="32"></fui-section>
			<view class="message">
				<block v-if="records.length>0">
					<view v-for="(item,index) in records" :key="index" class="recordsline">
						<view class="r1">
						{{item.entry_time_txt}}<block v-if="item.exit_time"> 到 {{item.exit_time_txt}}</block>
						</view>
						<fui-tag v-if="item.status==2 || item.status==6" type="danger" :text="item.status_txt" :padding="['8rpx','16rpx']"></fui-tag>
						<fui-tag v-else :text="item.status_txt" :padding="['8rpx','16rpx']"></fui-tag>
					</view>
				</block>
				<fui-text v-else text="无记录" color="#c2c2c2" :size="28" block></fui-text>
				<fui-text @click="$navigateTo('parking/records/list?plate_number='+plate_number)" text="点击查看更多>>" v-if="records && records.length==5" decoration="underline" color="#000000" :size="28" block></fui-text>
			</view>
		</view>
		<view class="pannel">
			<fui-section title="缴费记录" isLine size="32"></fui-section>
			<view class="message">
				<block v-if="pay && pay.length>0">
					<view v-for="(item,index) in pay" :key="index" class="payline">
						<text>{{item.pay_time}} {{item.pay_type}}￥{{parseNumber(item.pay_price)}}</text>
						<fui-tag :text="item.order_type" :padding="['8rpx','16rpx']"></fui-tag>
					</view>
				</block>
				<fui-text v-else text="无记录" color="#c2c2c2" :size="28" block></fui-text>
				<fui-text text="点击查看更多>>" v-if="pay && pay.length==5" decoration="underline" color="#000000" :size="28" block></fui-text>
			</view>
		</view>
		<view class="pannel">
			<fui-section title="操作记录" isLine size="32"></fui-section>
			<view class="message">
				<block v-if="logs">
					<view v-for="(item,index) in logs" :key="index" class="logline">
						<text>{{item.createtime}}</text>
						<text style="margin-left: 10rpx;">{{item.message}}</text>
					</view>
				</block>
				<fui-text v-else text="无记录" color="#c2c2c2" :size="28" block></fui-text>
				<fui-text text="点击查看更多>>" v-if="logs && logs.length==5" decoration="underline" color="#000000" :size="28" block></fui-text>
			</view>
		</view>
		<view class="pannel">
			<fui-section title="异常记录" isLine size="32"></fui-section>
			<view class="message">
				<block v-if="exception">
					<view v-for="(item,index) in exception" :key="index" class="exceptline">
						<text>{{item.createtime.slice(0,16)}}</text>
						<text style="margin-left: 10rpx;">{{item.barrier}}</text>
						<text style="margin-left: 10rpx;">{{item.message}}</text>
					</view>
				</block>
				<fui-text v-else text="无记录" color="#c2c2c2" :size="28" block></fui-text>
				<fui-text text="点击查看更多>>" v-if="exception && exception.length==5" decoration="underline" color="#000000" :size="28" block></fui-text>
			</view>
		</view>
		<fui-fab v-if="fabs" background="#dd6858" distance="50" bottom="40" width="80" position="right" :fabs="fabs" @click="handleClick"></fui-fab>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDate,parseNumber} from '@/utils/util.js';
	import platetype from '@/components/common/platetype.vue';
	export default {
		components:{
			platetype:platetype
		},
		data() {
			return {
				plate_number:'',
				cars:'',
				logs:'',
				exception:'',
				records:'',
				pay:'',
				fabs: '',
			}
		},
		onLoad(e) {
			this.plate_number=e.plate_number;
			this.$get('parking/index/search',{plate_number:e.plate_number},true).then(res=>{
				this.cars=res.cars;
				this.logs=res.logs;
				this.exception=res.exception;
				this.records=res.records;
				this.pay=res.pay;
				this.formaterfabs();
			});
		},
		methods: {
			...methods,
			parseNumber,
			handleClick:function(e){
				this.fabs[e.index].click();
			},
			validityPeriod:function(start,end){
				return formatDate(new Date(start*1000))+' 到 '+formatDate(new Date(end*1000));
			},
			formaterfabs:function(){
				let fabs=[];
				let rules_txt={
					monthly:'月卡',
					day:'日卡',
					member:'会员卡',
					stored:'储值卡',
					vip:'VIP卡',
				};
				let actions={
					edit:{
						src:baseUrl+'assets/img/miniapp/edit.png',
						width:44,
						height:44,
						background:'#fff',
						size:28,
						text: '编辑'+rules_txt[this.cars.rules_type],
						click:()=>{
							this.$navigateTo('parking/cars/detail?rules_type='+this.cars.rules_type+'&cars_id='+this.cars.id);
						}
					},
					del:{
						src:baseUrl+'assets/img/miniapp/delete.png',
						width:46,
						height:46,
						background:'#fff',
						size:28,
						text: '删除'+rules_txt[this.cars.rules_type],
						click:()=>{
							uni.showModal({
								content:'您确定要删除该'+rules_txt[this.cars.rules_type]+'吗？',
								success:(e)=>{
									if(e.confirm){
										this.$post('parking/cars/del',{id:this.cars.id},true,true).then(res=>{
											this.$navigateBack(1500);
										});
									}
								}
							})
						}
					},
					entry:{
						src:baseUrl+'assets/img/miniapp/entry.png',
						width:50,
						height:50,
						background:'#fff',
						size:28,
						text: '手动入场',
						click:()=>{
							uni.setStorageSync('plate_number',this.plate_number);
							this.$navigateTo('parking/records/entry')
						}
					},
					exit:{
						src:baseUrl+'assets/img/miniapp/exit.png',
						width:40,
						height:40,
						background:'#fff',
						size:28,
						text: '手动出场',
						click:()=>{
							uni.setStorageSync('plate_number',this.plate_number);
							this.$navigateTo('parking/records/exit')
						}
					},
					pay:{
						src:baseUrl+'assets/img/miniapp/pay.png',
						width:50,
						height:50,
						background:'#fff',
						size:28,
						text: '手动缴费',
						click:()=>{
							this.$navigateTo('parking/records/pay?plate_number='+this.plate_number);
						}
					},
					black:{
						src:baseUrl+'assets/img/miniapp/addblack.png',
						width:40,
						height:40,
						background:'#fff',
						size:28,
						text: '加入黑名单',
						click:()=>{
							uni.setStorageSync('plate_number',this.plate_number);
							this.$navigateTo('parking/cars/black')
						}
					},
					recharge_monthly:{
						src:baseUrl+'assets/img/miniapp/monthpay.png',
						width:44,
						height:44,
						background:'#fff',
						size:28,
						text: '月卡充值',
						click:()=>{
							this.$navigateTo('parking/cars/recharge?cars_id='+this.cars.id);
						}
					},
					recharge_stored:{
						src:baseUrl+'assets/img/miniapp/monthpay.png',
						width:44,
						height:44,
						background:'#fff',
						size:28,
						text: '储值卡充值',
						click:()=>{
							this.$navigateTo('parking/cars/recharge?cars_id='+this.cars.id);
						}
					},
					contact:{
						src:baseUrl+'assets/img/miniapp/phone.png',
						width:44,
						height:44,
						background:'#fff',
						size:28,
						text: '联系车主',
						click:()=>{
							uni.makePhoneCall({
								phoneNumber:this.cars.mobile
							});
						}
					},
				};
				if(this.cars.rules){
					fabs.push(actions.edit);
					fabs.push(actions.del);
				}
				if(this.records.length>0 && (this.records[0].status===0 || this.records[0].status===1 || this.records[0].status===6)){
					fabs.push(actions.pay);
					fabs.push(actions.exit);
				}else{
					fabs.push(actions.entry);
				}
				if(this.cars.rules && this.cars.rules_type=='monthly'){
					fabs.push(actions.recharge_monthly);
				}
				if(this.cars.rules && this.cars.rules_type=='stored'){
					fabs.push(actions.recharge_stored);
				}
				fabs.push(actions.black);
				if(this.cars.mobile){
					fabs.push(actions.contact);
				}
				this.fabs=fabs;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-wrap {
		background-color: #fff;
	}
	.pannel{
		padding: 30rpx 0;
		border-bottom: 1px solid #eeeeee;
		.message{
			padding: 30rpx;
			padding-bottom: 0;
			.item{
				display: flex;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;
			}
			.logline{
				line-height: 50rpx;
				font-size: 28rpx;
			}
			.recordsline{
				line-height: 60rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}
			.payline{
				line-height: 60rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}
			.exceptline{
				line-height: 60rpx;
				font-size: 28rpx;
			}
		}
	}
</style>